<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title><?=$this->title?></title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['annotatedtimeline','corechart', 'controls','table']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var dashboard = new google.visualization.Dashboard(
             document.getElementById('dashboard'));
      
        var data = new google.visualization.DataTable(<?=$this->data?>);




      
         var control = new google.visualization.ControlWrapper({
           'controlType': 'ChartRangeFilter',
           'containerId': 'control',
           'options': {
             // Filter by the date axis.
             'filterColumnIndex': 0,
             'ui': {
               'chartType': 'LineChart',
               'chartOptions': {
                 'chartArea': {'width': '80%'},
                 'hAxis': {'baselineColor': 'none'}
               },
               // Display a single series that shows the closing value of the stock.
               // Thus, this view has two columns: the date (axis) and the stock value (line series).
              
              'chartView': {
                 'columns': [0, 1]
               },
               
               // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
               'minRangeSize': 604800000 //86400000
             }
           },
           // Initial range: 2012-02-09 to 2012-03-20.
           'state': {'range': {'start': new Date('<?=date('Y-m-d',strtotime('-1 year'))?>'), 'end': new Date('<?=date('Y-m-d')?>')}}
         });
      
      

      
         var chart = new google.visualization.ChartWrapper({
           'chartType': 'LineChart',
           'containerId': 'chart',
           'options': {
                <?=$this->options?>
            },
         });
      
         

                // Define a table visualization
          var table = new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'div_table',
            'options': {'sortColumn': 0,'sortAscending': false}
          });




         dashboard.bind(control, chart)
         .bind(control, table)
         .draw(data);
      }
      

      function nuewva(){
        
         var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
            document.getElementById('chart'));
         var data = new google.visualization.DataTable(<?=$this->data?>);
         annotatedtimeline.draw(data, {'displayAnnotations': true});
      }
      
      
            
      
      //google.setOnLoadCallback(nuewva);
      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body>
    <div id="dashboard">
        <div id="chart" style='width: 100%; height: 600px;'></div>
        <div id="control" style='width: 100%; height: 50px;'></div>
        <div id="div_table" style='width: 95%;'></div>
        
        
    </div>
  </body>
</html>